<style>
button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
.survey-container {
  width: 80%;
  margin: 20px auto;
  background-color: #f0f8ff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.survey-header {
  text-align: left;
  margin-bottom: 10px;
}
.survey-header h3{
  font-size: 25px;
}
h3 {
  color: #007bff;
}

.survey-content {
  text-align: left;
}

h4 {
  color: #333;
  margin-bottom: 10px;
}

p {
  margin-bottom: 5px;
}

.question {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-left: 20px;
}

textarea {
  width: 100%;
  height: 100px;
}
.survey-header h3{
  text-align: center;
}
.question {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-left: 20px;
}
.survey-content h4{
  margin-top: 20px;
  text-align: center;
  font-size: 25px;
}
</style>
<template>
  <div class="survey-container">
    <div class="survey-header">
      <h3>问卷调查</h3>
    </div>
    <div class="survey-content">
      <h4>智慧景区满意度调查表</h4>
      <p>尊敬的女士/先生：</p>
      <p>您好！感谢您能抽出时间填写这份问卷！您的回答对景区改进旅游管理与提高旅游服务质量提供重要参考，为了促进xxx景区健康发展，特拟定了该问卷，希望您能协助我们做好这次调查。请您在选项处打“√”。非常感谢您的合作！祝您和您的家人旅途愉快，生活美满！</p>
      <div class="question">
        <p>1. 您来自哪里？</p>
        <label>
          <input type="radio" v-model="form.origin" value="济南市">济南市
        </label>
        <label>
          <input type="radio" v-model="form.origin" value="山东省内其他市">山东省内其他市
        </label>
        <label>
          <input type="radio" v-model="form.origin" value="国内">国内
        </label>
        <label>
          <input type="radio" v-model="form.origin" value="国外">国外
        </label>
      </div>
      <div class="question">
        <p>2. 您是什么时间游览的我们园区？</p>
        <label>
          <input type="radio" v-model="form.visittime" value="1-3天内">1-3天内
        </label>
        <label>
          <input type="radio" v-model="form.visittime" value="7天-15天">7天-15天
        </label>
        <label>
          <input type="radio" v-model="form.visittime" value="15天-30天">15天-30天
        </label>
        <label>
          <input type="radio" v-model="form.visittime" value="30天以上">30天以上
        </label>
      </div>
      <div class="question">
        <p>3. 您游览了我们哪些景点？</p>
        <label>
          <input type="checkbox" v-model="visitedPlacesHobby" value="飞天影院">飞天影院
        </label>
        <label>
          <input type="checkbox" v-model="visitedPlacesHobby" value="网红打卡点">网红打卡点
        </label>
        <label>
          <input type="checkbox" v-model="visitedPlacesHobby" value="一线天">一线天
        </label>
        <label>
          <input type="checkbox" v-model="visitedPlacesHobby" value="雷鸣山漂流">雷鸣山漂流
        </label>
        <label>
          <input type="checkbox" v-model="visitedPlacesHobby" value="海洋世界">海洋世界
        </label>
      </div>
      <div class="question">
        <p>4. 场馆内的设备您都体验了吗？</p>
        <label>
          <input type="radio" v-model="form.equipmentexperience" value="都体验了">都体验了
        </label>
        <label>
          <input type="radio" v-model="form.equipmentexperience" value="体验了一部分">体验了一部分
        </label>
        <label>
          <input type="radio" v-model="form.equipmentexperience" value="时间紧张，没有体验">时间紧张，没有体验
        </label>
      </div>
      <div class="question">
        <p>5. 您请给这次游览的整体体验打分（5分满分）？</p>
        <label>
          <input type="radio" v-model="form.overallscore" value="5分">5分
        </label>
        <label>
          <input type="radio" v-model="form.overallscore" value="4分">4分
        </label>
        <label>
          <input type="radio" v-model="form.overallscore" value="3分">3分
        </label>
        <label>
          <input type="radio" v-model="form.overallscore" value="2分">2分
        </label>
        <label>
          <input type="radio" v-model="form.overallscore" value="1分">1分
        </label>
      </div>
      <div class="question">
        <p>6. 您请给我们的服务打分（5分满分）？</p>
        <label>
          <input type="radio" v-model="form.servicescore" value="5分">5分
        </label>
        <label>
          <input type="radio" v-model="form.servicescore" value="4分">4分
        </label>
        <label>
          <input type="radio" v-model="form.servicescore" value="3分">3分
        </label>
        <label>
          <input type="radio" v-model="form.servicescore" value="2分">2分
        </label>
        <label>
          <input type="radio" v-model="form.servicescore" value="1分">1分
        </label>
      </div>
      <div class="question">
        <p>7. 您请给我们的产品打分（5分满分）？</p>
        <label>
          <input type="radio" v-model="form.productscore" value="5分">5分
        </label>
        <label>
          <input type="radio" v-model="form.productscore" value="4分">4分
        </label>
        <label>
          <input type="radio" v-model="form.productscore" value="3分">3分
        </label>
        <label>
          <input type="radio" v-model="form.productscore" value="2分">2分
        </label>
        <label>
          <input type="radio" v-model="form.productscore" value="1分">1分
        </label>
      </div>
      <div class="question">
        <p>8. 您认为我们还有哪方面需要改进？</p>
        <label>
          <input type="checkbox" v-model="improvementAreasHobby" value="景区的科学性">景区的科学性
        </label>
        <label>
          <input type="checkbox" v-model="improvementAreasHobby" value="互动的娱乐性">互动的娱乐性
        </label>
        <label>
          <input type="checkbox" v-model="improvementAreasHobby" value="服务质量">服务质量
        </label>
        <label>
          <input type="checkbox" v-model="improvementAreasHobby" value="产品介绍">产品介绍
        </label>
      </div>
      <div class="question">
        <p>9. 其他：</p>
        <textarea v-model="form.othercomments" placeholder="请填写您的意见和建议"></textarea>
      </div>
      <div>
        <button @click="submitOpinion">提交意见</button>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      form:{
        origin: "",
        visittime: "",
        visitedplaces: "",
        equipmentexperience: "",
        overallscore: "",
        servicescore: "",
        productscore: "",
        improvementareas: "",
        othercomments: ""
      },
      visitedPlacesHobby: [],
      improvementAreasHobby: [],
    };
  },
  methods:{
    submitOpinion(){
      this.form.visitedplaces=this.visitedPlacesHobby.join(",");
      this.form.improvementareas=this.improvementAreasHobby.join(",");
      axios.post(`http://localhost:1000/yon/add`,this.form).then(res=>{
        this.form={
          origin: "",
          visittime: "",
          visitedplaces: "",
          equipmentexperience: "",
          overallscore: "",
          servicescore: "",
          productscore: "",
          improvementareas: "",
          othercomments: ""
        };
        alert("提交成功");
      })
    }
  }
};
</script>